<template>
	<view class="wrapper">
		<view class="blank30"></view>
		<u-search :inputStyle='inputCustomStyle' bgColor="#ffffff" placeholder="Enter the Country" v-model="keyword"
			shape="square" :showAction="false" @search="search"></u-search>
		<view class="blank30"></view>

		<view class="">
			<view class="box" :class="activeId == item.sid ?'active':''" v-for="(item,index) in list" @click="choose(index)">
				<view class="flex">
					<u-avatar :src="item.nationalFlagUrl" :size="upx2px(60)" mode="widthFix" style="border: 1px solid #F7F7F7;"></u-avatar>
					<view class="flex-1 ml20">
						{{item.countriesName}}
					</view>
				</view>
				<!-- <u-icon name="checkbox-mark" v-if="currentIndex == index && activeId != currentIndex"></u-icon> -->
			</view>
		</view>

		<template v-if="loadingStatus == 'loading'">
			<view class="box">
				<u-skeleton avatar :size="upx2px(60)" :titleHeight="upx2px(60)" :loading="true"></u-skeleton>
			</view>
		</template>
		

		<!-- <u-loading-icon v-if="loadingStatus == 'loading'"></u-loading-icon> -->
		<nodata v-if="loadingStatus == 'end' && list.length == 0"></nodata>
	</view>
</template>

<script>
	import {
		countries
	} from '@/common/api.js';
	import nodata from '@/components/nodata.vue';

	export default {
		components: {
			nodata
		},
		data() {
			return {
				list: [],
				keyword: '',
				activeId: '',
				currentIndex: 1,
				page: 1,
				limit: 50,
				loadingStatus: '',
				total: 0
			}
		},
		methods: {
			choose(index) {
				// this.activeId = this.list[index].sid;
				uni.$emit('select_country', this.list[index]);
				this.navBack();
			},
			async getData(page) {
				// uni.showLoading({
				// 	title: 'loading'
				// });
				let d = {
					size: this.limit,
					current: page,
					countriesName: this.keyword
				};
				this.loadingStatus = 'loading';
				page == 1 && (this.list = []);
				// return false;
				await countries(d, {
					custom: {
						catch: true
					}
				}).then(async (res) => {
					let {
						current,
						records,
						size,
						total
					} = res.data;
					if (page == 1) {
						this.list = records || [];
					} else {
						this.list = this.list.concat(records);
					}
					this.total = Number(total) || 0;
					this.page = Number(current) || 0;
					this.loadingStatus = 'end';
				}).catch(res => {
					// console.log(res);
					this.loadingStatus = 'error';
				}).finally(() => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});

			},
			search() {
				this.getData(1);
			}
		},
		onReady() {

		},
		onShow() {
			uni.$off('refresh_country');
			uni.$once('refresh_country', (v) => {
				this.getData(1);
			})
		},
		onLoad(d) {
			this.activeId = d.id || '';
			this.getData(1);
		},
		async onPullDownRefresh() {
			this.getData(1);
		},
		onReachBottom() {
			if (this.loadingStatus == 'loading') {
				return;
			}
			if (this.list.length < this.total) {
				this.getData(this.page + 1)
			}
		}
	}
</script>

<style lang="scss">
	.box {
		padding: 18upx 30upx;
		margin-bottom: 20upx;

		&.active {
			background: #2623D1;
			color: #ffffff;
		}
	}
	/deep/.flex {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	}
</style>